<template>
	<div class="edit">
		<el-steps :space="200" :active="active" simple class="edit-top">
			<el-step title="试卷选择"
				><template #icon
					><span class="iconfont icon-classify"></span></template
			></el-step>
			<el-step title="试卷配置"
				><template #icon
					><span class="iconfont icon-shiti"></span></template
			></el-step>
			<el-step title="考试配置"
				><template #icon
					><span class="iconfont icon-setting"></span></template
			></el-step>
			<el-step title="用户选择"
				><template #icon
					><span class="iconfont icon-persons"></span></template
			></el-step>
			<el-step title="考试发布"
				><template #icon
					><span class="iconfont icon-publish"></span></template
			></el-step>
		</el-steps>
		<PaperSelect
			v-if="active === 0"
			@select="(type) => paperSelect(type)"
		></PaperSelect>
		<Paper
			ref="paper"
			v-if="active === 1 && form.genType === 1"
			:show="paperShow"
			@paperShowUpdate="(show) => (paperShow = show)"
		></Paper>
		<PaperRule
			ref="paperRule"
			v-if="active === 1 && form.genType === 2"
		></PaperRule>
		<ExamSetting ref="examSetting" v-if="active === 2"></ExamSetting>
		<ExamUser ref="examUser" v-if="active === 3"></ExamUser>
		<ExamPublish v-if="active === 4"></ExamPublish>
		<div class="edit-bottom">
			<div v-if="progressBar.percent > 0" class="edit-bottom-percent">
				<el-progress :percentage="progressBar.percent">{{
					progressBar.msg
				}}</el-progress>
			</div>
			<el-button
				v-if="active >= 1 && paperShow != 'editor' && btnShow"
				type="primary"
				@click="active--"
				>上一步</el-button
			>
			<el-button
				v-if="
					active >= 1 &&
					active < 4 &&
					paperShow != 'editor' &&
					btnShow
				"
				type="primary"
				@click="next()"
				>下一步</el-button
			>
			<el-button
				v-if="active >= 4 && paperShow != 'editor' && btnShow"
				type="primary"
				@click="publish()"
				>发布</el-button
			>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import PaperSelect from "./PaperSelect.vue";
import Paper from "./Paper.vue";
import PaperRule from "./PaperRule.vue";
import ExamSetting from "./ExamSetting.vue";
import ExamUser from "./ExamUser.vue";
import ExamPublish from "./ExamPublish.vue";
import { useExamStore, type ExamQuestion, type ExamRule } from "@/stores/exam";
import { ElMessage } from "element-plus";
import http from "@/request";
import dayjs from "dayjs";
import { useRouter, useRoute } from "vue-router";

// 定义变量
const route = useRoute();
const router = useRouter();
const active = ref(0); // 当前激活步骤
const paperShow = ref("paper"); // 试卷显示
const form = useExamStore(); // 考试储存
const paper = ref(); // 试卷配置组件
const paperRule = ref(); // // 试卷配置组件
const examSetting = ref(); // 考试配置组件
const examUser = ref(); // 考试用户组件
const btnShow = ref(true); // 按钮显示
const progressBar = reactive({
	// 进度条
	percent: 0, // 进度
	code: 200, // 响应码
	msg: "", // 响应消息
});

// 组件挂载完成后，执行如下方法
onMounted(async () => {
	// 如果是添加，初始化数据
	if (route.path.indexOf("/mockExam/add") >= 0) {
		form.id = null;
		form.name = `考试-${dayjs().add(0, "day").format("YYYY-MM-DD")}`;
		form.paperName = `试卷-${dayjs().add(0, "day").format("YYYY-MM-DD")}`;
		form.examTimes = [
			dayjs()
				.add(0, "day")
				.hour(8)
				.minute(0)
				.second(0)
				.format("YYYY-MM-DD HH:mm:ss"),
			dayjs()
				.add(0, "day")
				.hour(10)
				.minute(0)
				.second(0)
				.format("YYYY-MM-DD HH:mm:ss"),
		];
		form.markTimes = [
			dayjs()
				.add(0, "day")
				.hour(14)
				.minute(0)
				.second(0)
				.format("YYYY-MM-DD HH:mm:ss"),
			dayjs()
				.add(0, "day")
				.hour(18)
				.minute(0)
				.second(0)
				.format("YYYY-MM-DD HH:mm:ss"),
		];
		form.genType = 1;
		form.passScore = 0;
		form.sxes = [] as number[];
		form.showType = 1;
		form.anonState = 2;
		form.scoreState = 2;
		form.rankState = 2;
		form.state = 1;
		form.examQuestions = [] as ExamQuestion[];
		form.examRules = [] as ExamRule[];
		form.examUserIds = [] as number[];
		form.markUserIds = [] as number[];
	}
	// 如果是修改，回显数据
	else if (route.path.indexOf("/mockExam/edit/") >= 0 && route.params.id) {
		let {
			data: { data },
		} = await http.post("mockExam/paper", { id: route.params.id });
		form.id = data.id;
		form.name = data.name;
		form.paperName = data.paperName;
		form.examTimes[0] = data.startTime;
		form.examTimes[1] = data.endTime;
		if (data.markType === 2) {
			form.markTimes[0] = data.markStartTime;
			form.markTimes[1] = data.markEndTime;
		}
		form.genType = data.genType;
		form.passScore = data.passScore;
		form.sxes = data.sxes;
		form.showType = data.showType;
		form.anonState = data.anonState;
		form.scoreState = data.scoreState;
		form.rankState = data.rankState;
		form.state = data.state;
		form.examQuestions = data.examQuestions;
		form.examRules = data.examRules;
		form.examUserIds = data.examUserIds;
		form.markUserIds = data.markUserIds;
		form.noUpdate();

		if (form.genType === 1) {
			// 根据组卷类型自动跳到下一步
			paperSelect("blank");
		} else {
			paperSelect("random");
		}
	}
});

// 试卷选择方式
function paperSelect(type: string) {
	// 选择空白试卷，组固定试卷，显示空白试卷
	if (type === "blank") {
		form.genType = 1;
		paperShow.value = "paper";
		next();
	}
	// 选择文本导入，组固定试卷，显示试题编辑器
	else if (type === "quick") {
		form.genType = 1;
		paperShow.value = "editor";
		next();
	}
	// 选择随机试卷，组随机试卷，显示抽题规则页面
	else if (type === "random") {
		form.genType = 2;
		next();
	}
}

// 下一步
async function next() {
	if (active.value === 0) {
		// 试卷选择
		active.value++;
		return;
	}

	if (active.value === 1) {
		// 试卷配置
		let component = form.genType === 1 ? paper : paperRule;
		if (await component.value.next()) {
			if (form.subjectiveQuestionNum + form.objectiveQuestionNum === 0) {
				ElMessage.error(
					`最少添加一${form.genType === 1 ? "道试题" : "条规则"}`
				);
				return;
			}

			active.value++;
		}
		return;
	}

	if (active.value === 2) {
		// 考试配置
		let component = examSetting;
		if (await component.value.next()) {
			active.value++;
		}
		return;
	}

	if (active.value === 3) {
		// 用户选择
		let component = examUser;
		if (await component.value.next()) {
			active.value++;
		}
	}
}

// 发布考试
async function publish() {
	// 隐藏发布等按钮
	btnShow.value = false;
	// 发布考试
	let {
		data: { code, data: processBarId },
	} = await http.post(
		"mockExam/publish",
		JSON.stringify({
			id: form.id,
			name: form.name,
			paperName: form.paperName,
			genType: form.genType,
			passScore: form.passScore,
			sxes: form.sxes,
			showType: form.showType,
			anonState: form.anonState,
			scoreState: form.scoreState,
			rankState: form.rankState,
			state: form.state,
			// examQuestions: form.examQuestions,
			mockExamQuestionExes: form.examQuestions,
			// examRules: form.examRules,
			mockExamRules: form.examRules,
			// examUserIds: form.examUserIds,
			mockExamUserIds: form.examUserIds,
			markUserIds: form.markUserIds,
			totalScore: form.totalScore,
			markType: form.markType,
			startTime: form.examTimes[0],
			endTime: form.examTimes[1],
			markStartTime: form.markType === 2 ? form?.markTimes[0] : "",
			markEndTime: form.markType === 2 ? form?.markTimes[1] : "",
		}),
		{ headers: { "Content-Type": "application/json" } }
	);

	if (code !== 200) {
		// 如果有异常，显示按钮重新操作
		btnShow.value = true;
		return;
	}

	// 显示进度
	let timer = setInterval(async function () {
		let {
			data: { code, msg, data },
		} = await http.post("progressBar/get", { id: processBarId });
		progressBar.code = code;
		progressBar.msg = msg;
		progressBar.percent = data.percent;

		if (code !== 200) {
			// 如果报错，停止进度条，显示按钮
			clearInterval(timer);
			btnShow.value = true;
			return;
		}

		if (progressBar.percent < 100) {
			// 如果进度不足100%，间隔1秒在查询进度
			return;
		}

		// 完成后跳转道考试列表页面
		clearInterval(timer);
		router.push("/mockExam");
	}, 1000);
}
</script>

<style lang="scss" scoped>
.edit {
	display: flex;
	flex-direction: column;
	height: calc(100% - 20px);
	position: relative;

	.edit-top {
		background-color: white;
	}

	.edit-bottom {
		z-index: 99;
		position: absolute;
		bottom: 0px;
		right: 0px;
		.edit-bottom-percent {
			display: inline-block;
			margin: 0px 30px 30px 0px;
			width: 400px;
		}
	}
}
</style>
